AngularJS supports conditional statements within templates using directives like ng-if, ng-show, and ng-hide. These directives allow you to conditionally show or hide elements based on the evaluation of expressions.
Here are some AngularJS Conditional Directive:
- ng-if Directive
- ng-show and ng-hide Directives
- ng-switch Directive
- Ternary Operator
ng-if: In AngularJS, the `ng-if` directive dynamically adds or removes elements from the DOM based on the evaluation of a given expression. When the expression evaluates to true, the associated element and its children are rendered, but if the expression evaluates to false, the element is removed entirely from the DOM. This directive effectively controls the visibility of elements based on runtime conditions.
<div data-ng-if="5>4">
<p>5>4</p>
</div>
<div data-ng-init="isVisiable = false">
<p data-ng-if="isVisiable">
isVisiable
</p>
</div>
ng-show and ng-hide: In AngularJS, the `ng-show` directive dynamically toggles the CSS display property of an element based on the evaluation of a given expression. When the expression evaluates to true, the element is displayed (by setting `display: block`), but if the expression evaluates to false, it is hidden (by setting `display: none`).
On the other hand, the `ng-hide` directive functions as the inverse of `ng-show`. It also toggles the CSS display property, but it hides the element when the expression evaluates to true, and shows it when the expression is false. This directive provides an alternative approach for controlling element visibility based on runtime conditions.
<!-- data-ng-show -->
<div data-ng-show="isVisiable">
This content is displayed if isVisible is true.
</div>
<!-- data-ng-hide -->
<div data-ng-hide="isVisiable">
This content is hidden if isVisible is true.
</div>
ng-switch: In AngularJS, the `ng-switch` directive provides a way to conditionally display elements based on the evaluation of expressions. It functions similarly to a switch statement found in traditional programming languages. You can use `ng-switch` to define multiple `ng-switch-when` directives, each associated with a specific expression. When the expression associated with `ng-switch` matches one of the `ng-switch-when` expressions, the corresponding element is displayed, and others are hidden. This directive offers a structured approach for managing the conditional rendering of elements in AngularJS applications.
<div data-ng-init="operator = '+'; x = 10; y = 20">
<div ng-switch="operator">
<div ng-switch-when="+">{{x+y}}</div>
<div ng-switch-when="-">{{x-y}}</div>
<div ng-switch-default>Default -> {{x}}, {{y}}</div>
</div>
</div>
Ternary Operator: In AngularJS expressions, the ternary operator `(condition ? expression1 : expression2)` provides a concise means to write conditional statements. With this operator, you can execute one expression if a condition evaluates to true, and another expression if the condition evaluates to false. This allows for streamlined and readable code when dealing with simple conditional logic within AngularJS templates.
<div data-ng-init="isVisiable = false; operator = '+'; x = 10; y = 20; isLoggedIn = false">
<p>{{ isLoggedIn ? 'Welcome, User!' : 'Please log in.' }}</p>
</div>
Example -
<!DOCTYPE html>
<html lang="en" data-ng-app="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div class="container border">
<div data-ng-if="5>4">
<p>5>4</p>
</div>
<div data-ng-init="isVisiable = false; operator = '+'; x = 10; y = 20; isLoggedIn = false">
<p data-ng-if="isVisiable">
isVisiable
</p>
<!-- data-ng-show -->
<div data-ng-show="isVisiable">
This content is displayed if isVisible is true.
</div>
<!-- data-ng-hide -->
<div data-ng-hide="isVisiable">
This content is hidden if isVisible is true.
</div>
<div ng-switch="operator">
<div ng-switch-when="+">{{x+y}}</div>
<div ng-switch-when="-">{{x-y}}</div>
<div ng-switch-default>Default -> {{x}}, {{y}}</div>
</div>
<div class="" data-ng-init="nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]">
<div class="" data-ng-repeat="num in nums">
<span class="fw-bold" data-ng-class="(num % 2 == 0 ? 'text-success' : 'text-danger')"
data-ng-bind="num"></span>
<span data-ng-if="(num % 2 == 0)">{{num}} is even</span>
<span data-ng-if="(num % 2 != 0)">{{num}} is odd</span>
</div>
</div>
</div>
</div>
</body>
</html>
Thank you,
I hope you are enjoying this code.
Leave Comment